<template>
  <!-- 搜索框 -->
  <el-space>
    <el-select v-model="query.departId" placeholder="请选择部门" clearable>
      <el-option
          v-for="depart in departs"
          :key="depart.id"
          :label="depart.name"
          :value="depart.id"
      ></el-option>
    </el-select>
    <el-select v-model="query.gender" placeholder="请选择性别" clearable>
      <el-option value="男">男</el-option>
      <el-option value="女">女</el-option>
    </el-select>
    <el-input v-model="query.name" placeholder="输入姓名" clearable/>
    <el-input v-model="query.phone" placeholder="输入电话" clearable/>
    <el-button type="primary" plain @click="queryList">
      <el-icon :size="14">
        <files />
      </el-icon>
      搜索
    </el-button>
    <el-button type="info" plain @click="initList">
      <el-icon :size="18">
        <search />
      </el-icon>
      生成工资信息
    </el-button>
    <!--上传数据-->
    <el-upload :action="uploadUrl"
               :show-file-list="false"
               :auto-upload="false"
               :multiple="false"
               :on-change="checkUpload"
               accept=".xls, .xlsx">
      <el-button type="info" plain>
        <el-icon :size="18">
          <upload-filled />
        </el-icon>
        上传工资数据
      </el-button>
    </el-upload>
  </el-space>
  <el-divider></el-divider>
  <!-- 员工资信息列表 -->
  <div>
    <el-table :data="employees" border style="width: 100%">
      <el-table-column prop="name" label="姓名" width="180" />
      <el-table-column prop="age" label="年龄" width="180" />
      <el-table-column prop="depart" label="部门" width="280" />
      <el-table-column prop="phone" label="电话" width="180" />
      <el-table-column prop="postSalary" label="岗位工资" width="180" />
      <el-table-column prop="gradeSalary" label="薪级工资" width="180" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="text" size="small" @click="showDialog(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!-- 结果分页 -->
  <div class="block">
    <el-pagination v-model:currentPage="current" layout="prev, pager, next" :total="total" :hide-on-single-page="true"></el-pagination>
  </div>
  <!-- 员工工资信息对话框 -->
  <el-dialog v-model="dialogVisible" title="工资信息" :fullscreen="true">
    <template #title>
      <el-space>
        {{salaryForm.name}}-{{salaryForm.age}}-{{salaryForm.depart}}
      </el-space>
    </template>
    <el-form ref="salaryForm" :rules="salaryRules" :model="salaryForm" label-width="240px">
      <el-collapse v-model="activeNames" style="margin: 0 40px;">
        <el-collapse-item name="1">
          <template #title>
            <i class="header-icon el-icon-s-management"></i>基础部分
          </template>
          <el-row>
          <el-col :span="6">
            <el-form-item label="岗位工资" prop="postSalary">
              <el-input v-model="salaryForm.postSalary" :precision="2" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="薪级工资" prop="gradeSalary">
              <el-input v-model="salaryForm.gradeSalary"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="提高10%" prop="enhanced">
              <el-input v-model="salaryForm.enhanced"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        </el-collapse-item>
        <el-collapse-item name="2">
          <template #title>
            <i class="header-icon el-icon-s-management"></i>绩效部分
          </template>
          <el-row>
          <el-col :span="6">
            <el-form-item label="基础绩效" prop="baseMerit">
              <el-input v-model="salaryForm.baseMerit"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="年末绩效" prop="yearMerit">
              <el-input v-model="salaryForm.yearMerit"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="超课时费" prop="classFee">
              <el-input v-model="salaryForm.classFee"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="学生管理费" prop="studentFee">
              <el-input v-model="salaryForm.studentFee"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="专项奖惩" prop="rewardOrPunish">
              <el-input v-model="salaryForm.rewardOrPunish"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="加班费" prop="overtimePay">
              <el-input v-model="salaryForm.overtimePay"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        </el-collapse-item>
        <el-collapse-item name="3">
          <template #title>
            <i class="header-icon el-icon-s-management"></i>津贴补贴
          </template>
          <el-row>
          <el-col :span="6">
            <el-form-item label="工改保留" prop="retention1">
              <el-input v-model="salaryForm.retention1"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="改革性补贴" prop="retention2">
              <el-input v-model="salaryForm.retention2"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="2000年后参加工作补贴" prop="retention3">
              <el-input v-model="salaryForm.retention3"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="人才引进专项补贴" prop="retention4">
              <el-input v-model="salaryForm.retention4"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="专职司机工作补助" prop="retention5">
              <el-input v-model="salaryForm.retention5"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="公务交通补贴" prop="retention6">
              <el-input v-model="salaryForm.retention6"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="独子费" prop="retention7">
              <el-input v-model="salaryForm.retention7"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="专业（学科）带头人津贴" prop="retention8">
              <el-input v-model="salaryForm.retention8"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="室主任津贴" prop="retention9">
              <el-input v-model="salaryForm.retention9"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="技师津贴" prop="retention10">
              <el-input v-model="salaryForm.retention10"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="卫生防疫津贴" prop="retention11">
              <el-input v-model="salaryForm.retention11"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="护龄津贴" prop="retention12">
              <el-input v-model="salaryForm.retention12"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="安保人员津贴及值班费" prop="retention13">
              <el-input v-model="salaryForm.retention13"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="保密、密码及信访工作岗位津贴" prop="retention14">
              <el-input v-model="salaryForm.retention14"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="思政课教师岗位津贴" prop="retention15">
              <el-input v-model="salaryForm.retention15"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="独子费" prop="retention16">
              <el-input v-model="salaryForm.retention16"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        </el-collapse-item>
        <el-collapse-item name="4">
          <template #title>
            <i class="header-icon el-icon-s-management"></i>保险部分
          </template>
          <el-row>
          <el-col :span="6">
            <el-form-item label="养老保险" prop="insurance1">
              <el-input v-model="salaryForm.insurance1"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="职业年金" prop="insurance2">
              <el-input v-model="salaryForm.insurance2"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="医疗保险" prop="insurance3">
              <el-input v-model="salaryForm.insurance3"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="失业保险" prop="insurance4">
              <el-input v-model="salaryForm.insurance4"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="住房公积金" prop="insurance5">
              <el-input v-model="salaryForm.insurance5"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        </el-collapse-item>
      </el-collapse>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="modify">修改</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>

import {getDepartItems, list, initSalarys, saveSalary, importSalaryFromExcel, uploadSalaries} from "@/api/wage";
import {salaryRules} from "@/api/rules";
import {ElMessage, ElMessageBox} from "element-plus";
import {ref} from "vue";
import {objectClone} from "@/util/util";
import {Files, Search, Upload, UploadFilled} from "@element-plus/icons-vue";

export default {
  name: "Salary",
  components: {UploadFilled, Files, Search},
  setup() {
    const uploadUrl = ref('#')  // 上传路径
    return {
      salaryRules,
      uploadUrl
    }
  },
  data() {
    return {
      query: {
        departId: '',
        gender: '',
        name: '',
        phone: ''
      },
      departs: [],
      employees: [],
      dialogVisible: false,
      salaryForm: {
        postSalary: 0,
        gradeSalary: 0,
        enhanced: 0,
        baseMerit: 0,
        yearMerit: 0,
        classFee: 0,
        studentFee: 0,
        rewardOrPunish: 0,
        overtimePay: 0,
        retention1: 0,
        retention2: 0,
        retention3: 0,
        retention4: 0,
        retention5: 0,
        retention6: 0,
        retention7: 0,
        retention8: 0,
        retention9: 0,
        retention10: 0,
        retention11: 0,
        retention12: 0,
        retention13: 0,
        retention14: 0,
        retention15: 0,
        retention16: 0,
        insurance1: 0,
        insurance2: 0,
        insurance3: 0,
        insurance4: 0,
        insurance5: 0
      },
      activeNames: ref(['1', '2', '3', '4']),
      current: 1,
      size: 10
    }
  },
  created() {
    this.getDeparts()
  },
  methods: {
    // 获取部门列表
    getDeparts() {
      getDepartItems().then(res => {
        this.departs = res.data
      })
    },
    // 查询员工列表
    queryList() {
      list(this.query).then(res => {
        console.log(res)
        this.employees = res.data
      })
    },
    // 导入工资信息
    initList() {
      ElMessageBox.confirm(
          '确定要导入人员工资信息?',
          '警告',
          { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning', }
      ).then(() => {
        initSalarys().then(res => {
          ElMessage.success(res.msg)
        })
      }).catch(() => {
        ElMessage({
          type: 'info',
          message: '取消',
        })
      })
    },
    // 显示对话框
    showDialog(row) {
      this.salaryForm = objectClone(row)
      this.dialogVisible = true
    },
    // 保存工资信息
    modify() {
      ElMessageBox.confirm(
          '你正在修改员工工资信息，继续?',
          '警告',
          { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning', }
      ).then(() => {
        saveSalary(this.salaryForm).then(res => {
          ElMessage.success(res.msg)
          this.queryList()
        })
      }).catch(() => {
        ElMessage({
          type: 'info',
          message: '取消',
        })
      })
    },
    // 检查上传数据
    checkUpload(file) {
      importSalaryFromExcel(file).then(list => {
        uploadSalaries(list).then(res => {
          ElMessage.success(res.msg)
        })
        return true
      }).catch(reason => {
        ElMessage.error(reason)
        return false;
      })
    }
  },
  computed: {
    empList() {
      let data = []
      let _start = (this.current - 1) * this.size
      let _end = _start + this.size
      return this.employees.slice(_start, _end);
    },
    total() {
      return this.employees.length
    }
  }
}
</script>

<style scoped>
</style>